<template>
  <div style="margin-bottom: 20px;">
    <el-row :gutter="20">
      <el-col :span="6">
        <div class="grid-content bg-purple is-hover-shadow">
          <i class="el-icon-user card-icon bg1"></i>
          <div class="card-right-design">
            <span class="card-sz1 col1">6739</span>
            <div class="card-sz2">用户访问量</div>
          </div>
        </div>
      </el-col>
      <el-col :span="6">
        <div class="grid-content bg-purple is-hover-shadow">
          <i class="el-icon-chat-dot-round card-icon bg2"></i>
          <div class="card-right-design">
            <span class="card-sz1 col2">157</span>
            <div class="card-sz2">系统消息</div>
          </div>
        </div>
      </el-col>
      <el-col :span="6">
        <div class="grid-content bg-purple is-hover-shadow">
          <i class="el-icon-shopping-bag-2 card-icon bg3"></i>
          <div class="card-right-design">
            <span class="card-sz1 col3">4485</span>
            <div class="card-sz2">商品数量</div>
          </div>
        </div>
      </el-col>
      <el-col :span="6">
        <div class="grid-content bg-purple is-hover-shadow">
          <i class="el-icon-shopping-cart-full card-icon bg4"></i>
          <div class="card-right-design">
            <span class="card-sz1 col4">588</span>
            <div class="card-sz2">今日订单量</div>
          </div>
        </div>
      </el-col>
    </el-row>
    <el-row :gutter="20">
      <el-col :span="18"
        ><div class="grid-content bg-purple is-hover-shadow">
          <div class="el-card-body">
            <span class="el-card-body-title">订单动态</span>
            <div class="el-card-body-desc">
              最近一周订单状态，包括订单成交量和订单退货量
            </div>
            <div ref="chart1" style="width: 100%; height: 400px"></div>
          </div></div
      ></el-col>
      <el-col :span="6"
        ><div class="grid-content bg-purple is-hover-shadow">
          <div class="el-card-body">
            <span class="el-card-body-title">品类分布</span>
            <div class="el-card-body-desc">最近一个月销售商品的品类情况</div>
            <div ref="chart2" style="width: 100%; height: 400px"></div>
          </div></div
      ></el-col>
    </el-row>
    <el-row :gutter="20">
      <el-col :span="8"
        ><div class="grid-content bg-purple is-hover-shadow">
          <div class="el-card-body">
            <span class="el-card-body-title">时间线</span>
            <div class="el-card-body-desc">最近一个月销售商品的品类情况</div>
            <div class="block" style="margin: 0 10px 1px;height: 324px;">
              <el-timeline>
                <el-timeline-item
                  v-for="(activity, index) in activities"
                  :key="index"
                  :color="activity.color"
                  style="padding-bottom: 20px"
                >
                  <div class="timeline-item">
                    <div>
                      <p>{{ activity.content }}</p>
                      <p class="timeline-desc">{{ activity.description }}</p>
                    </div>
                    <div class="timeline-time">{{ activity.timestamp }}</div>
                  </div>
                </el-timeline-item>
              </el-timeline>
            </div>
          </div>
        </div></el-col
      >
      <el-col :span="8"
        ><div class="grid-content bg-purple is-hover-shadow">
          <div class="el-card-body">
            <span class="el-card-body-title">渠道统计</span>
            <div class="el-card-body-desc">最近一个月的订单来源统计</div>
            <div ref="chart3" style="width: 100%; height: 325px"></div>
          </div></div
      ></el-col>
      <el-col :span="8"
        ><div class="grid-content bg-purple is-hover-shadow">
          <div class="el-card-body">
            <span class="el-card-body-title">排行榜</span>
            <div class="el-card-body-desc">销售商品的热门榜单Top5</div>
            <div class="rank-item" v-for="(rank, index) in ranks" :key="index">
              <div class="rank-item-avatar">{{index +1}}</div>
              <div class="rank-item-content">
                <div class="rank-item-top">
                  <span>{{ rank.title }}</span>
                  <span class="rank-item-desc">销量：{{ rank.value }}</span>
                </div>
                <div>
                  <el-progress
                    :percentage="rank.percent"
                    :show-text="false"
                    :stroke-width="10"
                    :color="rank.color"
                  ></el-progress>
                </div>
              </div>
            </div>
          </div></div
      ></el-col>
    </el-row>
  </div>
</template>
  
  <script>
import * as echarts from "echarts";
export default {
  name: "HomePage",
  data() {
    return {
      chart: null,
      // 订单动态图表数据
      chartOptions: {
        grid: {
          top: "4%",
          left: "2%",
          right: "3%",
          bottom: "3%",
          containLabel: true,
        },
        xAxis: {
          type: "category",
          boundaryGap: false,
          data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
        },
        yAxis: {
          type: "value",
        },
        series: [
          {
            data: [220, 132, 191, 334, 290, 133, 320],
            type: "line",
            smooth: true,
          },

          {
            data: [82, 121, 300, 140, 90, 215, 189],
            type: "line",
            smooth: true,
            areaStyle: {},
          },
        ],
      },
      // 时间线数据
      activities: [
        {
          content: "收藏商品",
          description: "xxx收藏了你的商品，就是不买",
          timestamp: "30分钟前",
          color: "#00bcd4",
        },
        {
          content: "用户评价",
          description: "xxx给了某某商品一个差评，吐血啊",
          timestamp: "55分钟前",
          color: "#1ABC9C",
        },
        {
          content: "订单提交",
          description: "xxx提交了订单，快去收钱吧",
          timestamp: "1小时前",
          color: "#3f51b5",
        },
        {
          content: "退款申请",
          description: "xxx申请了仅退款，又要亏钱了",
          timestamp: "15小时前",
          color: "#f44336",
        },
        {
          content: "商品上架",
          description: "运营专员瞒着你上架了一辆飞机",
          timestamp: "1天前",
          color: "#009688",
        },
      ],
      // 排行榜数据
      ranks: [
        {
          title: "手机",
          value: 10000,
          percent: 80,
          color: "#f25e43",
        },
        {
          title: "电脑",
          value: 8000,
          percent: 70,
          color: "#00BCD4",
        },
        {
          title: "鞋子",
          value: 6000,
          percent: 60,
          color: "#64D572",
        },
        {
          title: "书籍",
          value: 4000,
          percent: 50,
          color: "#E9A745",
        },
        {
          title: "食品",
          value: 2000,
          percent: 40,
          color: "#009688",
        },
      ],
    };
  },
  created() {},
  mounted() {
    // 订单动态数据触发
    this.chart = echarts.init(this.$refs.chart1);
    this.chart.setOption(this.chartOptions);
    // 品类分布函数触发
    this.renderChart();
    // 渠道统计函数触发
    this.renderChart3();
  },
  methods: {
    // 品类分布图表回调函数
    renderChart() {
      const myChart2 = echarts.init(this.$refs.chart2);
      const options = {
        grid: {
          top: "4%",
          left: "2%",
          right: "1%",
          bottom: "3%",
          containLabel: true,
        },
        tooltip: {
          trigger: "item",
        },
        legend: {
          bottom: "5%",
          left: "center",
        },
        series: [
          {
            type: "pie",
            radius: ["30%", "60%"],
            avoidLabelOverlap: false,
            itemStyle: {
              borderRadius: 5,
              borderColor: "#fff",
              borderWidth: 2,
            },
            emphasis: {
              label: {
                show: true,
                fontWeight: "bold",
              },
            },
            labelLine: {
              show: false,
            },
            data: [
              { value: 1048, name: "运动" },
              { value: 735, name: "数码" },
              { value: 580, name: "家电" },
              { value: 484, name: "母婴" },
              { value: 300, name: "食品" },
            ],
          },
        ],
      };
      myChart2.setOption(options);
    },
    //渠道统计图表回调
    renderChart3() {
      const myChart3 = echarts.init(this.$refs.chart3);
      const options = {
        tooltip: {
          trigger: "axis",
          axisPointer: {
            // Use axis to trigger tooltip
            type: "shadow", // 'shadow' as default; can also be 'line' or 'shadow'
          },
        },
        legend: {},
        grid: {
          left: "1%",
          right: "6%",
          bottom: "3%",
          containLabel: true,
        },
        xAxis: {
          type: "value",
        },
        yAxis: {
          type: "category",
          data: ["浙江", "上海", "湖北", "湖南", "重庆", "江苏", "广东"],
        },
        series: [
          {
            name: "运动",
            type: "bar",
            stack: "total",
            label: {
              show: true,
            },
            emphasis: {
              focus: "series",
            },
            data: [320, 302, 301, 334, 390, 330, 320],
          },
          {
            name: "数码",
            type: "bar",
            stack: "total",
            label: {
              show: true,
            },
            emphasis: {
              focus: "series",
            },
            data: [120, 132, 101, 134, 90, 230, 240],
          },
          {
            name: "家电",
            type: "bar",
            stack: "total",
            label: {
              show: true,
            },
            emphasis: {
              focus: "series",
            },
            data: [220, 182, 191, 234, 290, 330, 310],
          },
          {
            name: "母婴",
            type: "bar",
            stack: "total",
            label: {
              show: true,
            },
            emphasis: {
              focus: "series",
            },
            data: [150, 212, 201, 154, 190, 330, 410],
          },
          {
            name: "食品",
            type: "bar",
            stack: "total",
            label: {
              show: true,
            },
            emphasis: {
              focus: "series",
            },
            data: [163, 132, 81, 134, 390, 253, 220],
          },
        ],
      };
      myChart3.setOption(options);
    },
  },
};
</script>
<style lang='scss' scoped>
* {
  margin: 0;
  padding: 0;
  outline: 0 !important;
}
.el-row {
  margin-bottom: 20px;
  &:last-child {
    margin-bottom: 0;
  }
}

.bg-purple {
  background: #f8f8f8;
  border: 1px solid #eaeaea;
}
.grid-content {
  display: flex;
  border-radius: 5px;
  min-height: 36px;
  align-items: center;
}
.row-bg {
  padding: 10px 0;
  background-color: #f9fafc;
}
.el-divider {
  background-color: #e9118b;
}
//hover时出现阴影
.is-hover-shadow:hover {
  box-shadow: 0px 0px 3px #adacac;
}
// 卡片图标布局
.card-icon {
  align-items: center;
  display: flex;
  justify-content: center;
  font-size: 50px;
  color: white;
  width: 100px;
  height: 100px;
  border-radius: 4px 0 0 4px;
}
// 卡片右侧文字布局
.card-right-design {
  display: flex;
  width: 67%;
  flex-direction: column;
}
// 用户访问量图标背景
.bg1 {
  background-color: #2d8cf0;
}
// 系统消息图标背景
.bg2 {
  background-color: #64d572;
}
// 商品数量图标背景
.bg3 {
  background-color: #f25e43;
}
// 金日成交量图标背景
.bg4 {
  background-color: #e9a745;
}
//卡片字体1
.card-sz1 {
  line-height: 1;
  font-size: 30px;
}
//卡片字体2
.card-sz2 {
  line-height: 1;
  margin-top: 10px;
  font-size: 14px;
  color: #999999;
}
//卡片字体颜色1
.col1 {
  color: #2d8cf0;
}
//卡片字体颜色2
.col2 {
  color: #64d572;
}
//卡片字体颜色3
.col3 {
  color: #f25e43;
}
//卡片字体颜色4
.col4 {
  color: #e9a745;
}
// -------------------------------------第二部分：订单动态，销售品类分布

// 主体部分布局
.el-card-body {
  display: flex;
  flex-direction: column;
  width: 100%;
  padding: 20px;
}
// 主体部分标题
.el-card-body-title {
  font-size: 18px;
  line-height: 1;
  text-align: left;
  font-weight: bold;
  padding-left: 10px;
  margin-bottom: 10px;
  color: #333;
}
// 主体部分描述
.el-card-body-desc {
  font-size: 14px;
  line-height: 1;
  color: #999999;
  text-align: left;
  padding-left: 10px;
  margin-bottom: 20px;
}
// --------------------------------------------------------------第三部分：时间线，渠道统计，排行榜
// 时间线布局
.timeline-item {
  display: flex;
  justify-content: space-between;
  font-size: 16px;
  color: #000;
  text-align: left;
  align-items: center;
}
// 时间线描述，时间字体设置
.timeline-time,
.timeline-desc {
  font-size: 12px;
  color: #787878;
}
// 缓解时间线UI冲突
.el-timeline-item__timestamp.is-bottom {
  margin-top: 0;
}
// 排行榜布局
.rank-item {
  display: flex;
  margin-bottom: 20px;
}
.rank-item-avatar {
  background-color: #F2F2F2;
  width: 45px;
  height: 45px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: space-evenly;
  margin-right: 10px;
}
.rank-item-content {
  flex: 1;
}
.rank-item-top {
  display: flex;
  justify-content: space-between;
  margin-bottom: 10px;
}
.rank-item-desc {
  font-size: 14px;
  color: #999;
}
</style>